Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

RichText: improve format boundary style #14519

Merged
merged 2 commits into from
Mar 21, 2019
Merged

RichText: improve format boundary style #14519

merged 2 commits into from
Mar 21, 2019

Conversation

ellatrix
Copy link
Member

@ellatrix ellatrix commented Mar 19, 2019 •
edited
Loading

Description

Fixes #14023. As discussed in #14023, the boundary style should be updated to inherit the current colour with opacity applied, so the style works in all contexts. This can be done in JS (unfortunately not CSS) but calculating the current colour and applying opacity, then setting it is a global stylesheet.

How has this been tested?

Format Before After
Link in Cover Image screenshot 2019-02-22 at 11 47 07 screenshot 2019-02-22 at 11 45 19
Bold in Cover Image screenshot 2019-02-22 at 11 47 14 screenshot 2019-02-22 at 11 45 27
Bold in Button screenshot 2019-02-22 at 11 48 00 screenshot 2019-02-22 at 11 46 21
Link screenshot 2019-02-22 at 11 47 46 screenshot 2019-02-22 at 11 45 54
Colour screenshot 2019-02-22 at 11 47 21 screenshot 2019-02-22 at 11 25 00
Bold screenshot 2019-02-22 at 11 47 29 screenshot 2019-02-22 at 11 45 41

Screenshots

Types of changes

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.

@ellatrix ellatrix added the [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable label Mar 19, 2019
@ellatrix ellatrix added this to the 5.4 (Gutenberg) milestone Mar 19, 2019
@jasmussen
Copy link
Contributor

Love it. You're the greatest.

I've a bit on my plate today, so I can't do a thorough test. But based on the screenshots, this change is 100% good to go visually.

@kjellr
Copy link
Contributor

kjellr commented Mar 20, 2019

This is looking great, @ellatrix! I tested it out with a bunch of different color/image backgrounds, and it works well. The only issue I'm seeing is that it's outputting the color as rgb() with an extra alpha parameter. For example: rgb(25, 30, 35, 0.2);.

Firefox and Chrome are fine with this, but Safari drops this rule entirely:

Screen Shot 2019-03-20 at 4 58 13 PM

If we can get that to spit out a rgba() color instead, this should be good to go.

@ellatrix
Copy link
Member Author

@kjellr Nice catch! Fixed now.

kjellr
kjellr approved these changes Mar 21, 2019
View reviewed changes
Copy link
Contributor

@kjellr kjellr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Works great. Thanks @ellatrix!

@ellatrix ellatrix merged commit 91269ae into master Mar 21, 2019
@ellatrix ellatrix deleted the try/format-boundary-style branch March 21, 2019 20:25
aduth
aduth reviewed Mar 26, 2019
View reviewed changes
packages/block-editor/src/components/rich-text/index.js
@@ -793,6 +820,9 @@ export class RichText extends Component {
}
}

// Wait for boundary class to be added.
setTimeout( () => this.recalculateBoundaryStyle() );
Copy link
Member

@aduth aduth Mar 26, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not a safe timeout, despite the component being wrapped with withSafeTimeout. I suspect it may be the reason behind some failings I'm seeing in master E2E tests:

https://travis-ci.com/WordPress/gutenberg/jobs/187954533

FAIL packages/e2e-tests/specs/blocks/quote.test.js (41.221s)
  ● Quote › can be merged into from a paragraph
    TypeError: Cannot read property 'querySelector' of undefined
      at t.value (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/block-editor/index.js?ver=1553629058:55:141215)
      at ../../http:/localhost:8889/wp-content/plugins/gutenberg/build/block-editor/index.js?ver=1553629058:55:144735
      at Suite.it (specs/blocks/quote.test.js:180:2)

Where one of the few occurrences of querySelector in block-editor is within recalculateBoundaryStyle (referencing the component's ref, which would be unset after unmount). It seems reasonable that it could cause an error, if the component were to become unmounted after the setTimeout is scheduled.

It seems like the most direct fix may simply be to call this.props.setTimeout instead.

@ellatrix ellatrix added [Type] Bug An existing feature does not function as intended [Type] Code Quality Issues or PRs that relate to code quality labels Mar 28, 2019
This was referenced Apr 1, 2019
Merged
Merged
ellatrix added a commit that referenced this pull request Apr 3, 2019
@ellatrix
RichText: improve format boundary style (#14519)
5f006f6 
* RichText: improve format boundary style

* rgb => rgba
ellatrix added a commit that referenced this pull request Apr 4, 2019
@ellatrix
Bug fixes from 5.4 (#14796)
09ac4a5 
* RichText: improve format boundary style (#14519)

* RichText: improve format boundary style

* rgb => rgba

* Paste: check plain text for gutenberg content (#14536)

* Make ClipboardButton inside a block work correctly in Safari (#7106)

* Make ClipboardButton inside a block work in Safari

* Update changelogs

* Block Editor: Update "Next" to "Unreleased" per guidelines

https://github.com/WordPress/gutenberg/blob/master/packages/README.md#maintaining-changelogs

* Input Interaction: always expand single line selection vertically (#14487)

* Input Interaction: always expand single line selection vertically

* Add e2e test

* Use MenuItem instead of IconButton (#14569)

* Remove id, infoid, label and aria-describedby from MenuItem (#14423)

* Preformatted: save line breaks as characters (#14653)

* Preformatted: save line breaks as characters

* Update e2e test

* Remove negative toolbar position rules from full-aligned blocks. (#14669)

* Fix issue with double scrollbar in Fullscreen Mode (#14677)

This PR fixes an issue where the sidebar would have two scrollbars when in fullscreen mode.

* Fix WordPress embed block resolution (#14658)

* Retry failing embeds with trailing slash (#14705)

* Fix embedding Twitter URLs with a trailing slash (Closes #12664)

* Fix race condition for WordPress URLs that end in slashes, add test

* API Fetch: Fix error on empty OPTIONS preload data (#14714)

* Input Interaction: better horizontal edge detection (#14462)

* Input Interaction: better horizontal edge detection

* Correct BR ranges

* Add e2e test

* Increase buffer for Firefox

* Clean up

* Merge isEdge logic

* Fix typo

* Address feedback

* Build docs

* Fix memize option key typo (#14750)

* RichText: unify active formats, 'selectedFormat' and 'placeholderFormat' (#14411)

* RichText: unify active formats, 'selectedFormat' and 'placeholderFormat'

* Add extra e2e test

* Only should boundary style when focused

* Update docs

* Try to trigger tests with Travis

* Restore Travis config
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@aduth aduth aduth left review comments

@kjellr kjellr kjellr approved these changes

@jasmussen jasmussen Awaiting requested review from jasmussen

@chrisvanpatten chrisvanpatten Awaiting requested review from chrisvanpatten

Assignees
No one assigned
Labels
[Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Type] Bug An existing feature does not function as intended [Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Milestone
5.4 (Gutenberg)
Development

Successfully merging this pull request may close these issues.

Better format boundary design
4 participants
@ellatrix @jasmussen @kjellr @aduth